import React from 'react'
import { useLocation, useSearchParams, useParams, useNavigate } from 'react-router-dom'

export default function About() {
  // 在about组件中,需要接收编程式导航传递过来的state数据,应该使用react-router-dom提供的钩子叫做useLocation
  const location = useLocation()
  console.log(location)

  // 如果要操作查询字符串,使用useSearchParams
  const [sq, setSq] = useSearchParams()
  console.log(sq)
  // sq相当于是formdata
  console.log(sq.get('name'))
  console.log(sq.get('age'))

  // 如果要获取路由参数,使用useParams
  const params = useParams()
  console.log(params)

  const navigate = useNavigate()

  return (
    <div>
      About
      <button
        onClick={() => {
          setSq('name=ls&age=22')
        }}
      >
        修改查询字符串
      </button>
      <button
        onClick={() => {
            navigate(-1)
        }}
      >
        返回
      </button>
    </div>
  )
}
